<template lang="html">
  <section class="menu">
      <p class="user">{{userName}}</p>
      <ul>
        <li v-for="m in menus"><a href="#">{{m.text}}</a></li>
      </ul>
  </section>
</template>

<script>
import store from '../../stores/index'
import {mapState} from 'vuex'
export default {
  name: 'menu',
  store,
  computed: {
    ...mapState({
      userName: state => state.MenuStore.userName,
      menus: state => state.MenuStore.menus
    })
  }
}
</script>

<style lang="stylus">
.menu{
  width:120px;
  height:500px;
  position: fixed;
  top: 0;
  right:0;
  z-index: 9;
  background: #333;
}
.user{

  height: 45px;
  padding: 0 20px;
  line-height: 45px;
  background: #000;
  text-align: center;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
ul{

}
li{
  color: #fff;
  height: 40px;
  line-height:40px;

}
li a{
  display: block;
  text-decoration: none;
    color: #fff;
    font-size: 14px;
}
.menu .aside li:hover {
    background-color: #3e90e3;
}
</style>
